<template>
  <div class="app-container">
    <!-- 公共顶部 -->
    <large-screen-header to="/lossAssessment" :back="true" />
    <!-- 主体部分 -->
    <div class="app-main">
      <div class="app-left">
        <div class="app-left-item">
          <subheadings name="各评估子区抽样点个数" />
          <NumberofSamplingPoints />
        </div>
        <div class="app-left-item">
          <subheadings name="评估子区一破坏面积数据统计" />
          <DestructionAreaData />
        </div>
        <div class="app-left-item">
          <subheadings name="各类直接经济损失值（元）" />
          <EconomicLossValues/>
        </div>
      </div>
      <div class="app-center">
        <!-- 标题 -->
        <headline name="地震烈度评定结果及调查数据" />
      </div>
      <div class="app-right">
        <div class="app-right-item">
          <subheadings :name="'现场调查人员和车辆分布图'" />
          <PeopleAndCarVue/>
        </div>
        <div class="app-right-item">
          <subheadings :name="'现场各类型人员和车辆占比情况'" />
          <ProportionOfPeopleCarVue/>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import DestructionAreaData from './components/DestructionAreaData.vue';
import NumberofSamplingPoints from './components/NumberofSamplingPoints.vue';
import PeopleAndCarVue from './components/PeopleAndCar.vue';
import ProportionOfPeopleCarVue from './components/ProportionOfPeopleCar.vue';
import EconomicLossValues from './components/EconomicLossValues.vue';
</script>

<style lang="scss" scoped>
.app-main {
  display: flex;
  justify-content: space-between;
  .app-left {
    margin-left: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(100% - 40px);
    width: 450px;

    &-item {
      width: 450px;
      height: 300px;
      // background: linear-gradient(135deg, #00032D 0%, #000C58 50%, #00032D 100%);
      // opacity: .85;
      background: linear-gradient(
        135deg,
        rgba(0, 3, 45, 0.85) 0%,
        rgba(0, 12, 88, 0.85) 50%,
        rgba(0, 3, 45, 0.85) 100%
      );
      position: relative;
      color: #fff;
      &::after {
        content: '';
        display: block;
        width: 450px;
        height: 20px;
        background-size: 100% 100%;
        background-image: url('../../assets/images/common/bg_bottom.png') !important;
        position: absolute;
        bottom: -10px;
      }
      &:nth-child(2) {
        height: 320px;
      }
      &:nth-child(3) {
        height: 300px;
      }
    }
  }
  .app-right {
    margin-right: 30px;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(100% - 40px);
    width: 450px;

    &-item {
      width: 450px;
      height: 500px;
      background: linear-gradient(
        135deg,
        rgba(0, 3, 45, 0.85) 0%,
        rgba(0, 12, 88, 0.85) 50%,
        rgba(0, 3, 45, 0.85) 100%
      );
      position: relative;
      &::after {
        content: '';
        display: block;
        width: 450px;
        height: 20px;
        background-size: 100% 100%;
        background-image: url('../../assets/images/common/bg_bottom.png') !important;
        position: absolute;
        bottom: -10px;
      }
      &:nth-child(2) {
        height: 420px;
      }
    }
  }
}
</style>
